<template>
    <div class="my-diary">
        <ul>
            <li class="Content-list" v-for="data in list" :key="data.id">
                <div class="two-img" v-if="data.img.length===2">
                    <div class="Content-list-img" :style="{'width':width+'px'}">
                        <img src="../../assets/meirong.jpg" alt=""  >
                        <p :style="{'width':width+'px'}">before</p >
                    </div>
                    <div class="Content-list-img" :style="{'width':width+'px'}">
                        <img src="../../assets/meirong1.jpg" alt="" :style="{'width':width+'px'}">
                        <p :style="{'width':width+'px'}">after</p>
                    </div>
                </div>
                <div class="Content-list-text">
                    <h1>{{data.title}} <span v-if="show">评价 <Rate disabled v-model="data.satisfaction" /></span></h1>
                    <p>
                        {{data.text}} <span>查看详情</span>
                    </p>
                    <div class="Content-list-ues">
                        <div class="Content-list-uesImg">
                           <p><Icon type="ios-list-box-outline" class="icon"/>   玻尿酸填充泪沟    玻尿酸填充泪沟   玻尿酸填充泪沟  玻尿酸填充泪沟</p>
                        </div>
                        <div class="Content-list-zan">
                            <div class="Content-list-icon"><Icon type="ios-eye" size="25" class="icon" /> <span>24564</span></div>
                            <div class="Content-list-icon"><Icon type="md-images" size="20" class="icom icon"/> <span>24564</span></div>
                            <div class="Content-list-icon"><Icon type="md-thumbs-up" size="20" class="icom icon"/> <span>24564</span></div>
                            <div class=" Content-list-icon time">2018-08-29</div>
                        </div>
                    </div>
                    <div style="clear: both"></div>
                </div>
            </li>
        </ul>
        <div style="text-align: center">
            <Page :total="100" />
        </div>

        <div style="clear: both"></div>
    </div>
</template>

<script>
    export default {
        name: "MyDiary",
        props:['width','hide'],
        data () {
            return {
                list: [
                    {id: 1, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'【韩国DI整形医院 鼻子修复+脂肪填充】术后3个月的后记',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',usename:'定点双眼皮',satisfaction:5,time:'2018-08-29'},
                    {id: 2, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'【韩国DI整形医院 鼻子修复+脂肪填充】术后3个月的后记',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',usename:'定点双眼皮',satisfaction:4,time:'2018-08-29'},
                    {id: 3, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'【韩国DI整形医院 鼻子修复+脂肪填充】术后3个月的后记',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',usename:'定点双眼皮',satisfaction:4,time:'2018-08-29'},
                    {id: 4, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'【韩国DI整形医院 鼻子修复+脂肪填充】术后3个月的后记',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',usename:'定点双眼皮',satisfaction:4,time:'2018-08-29'},
                    {id: 5, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'【韩国DI整形医院 鼻子修复+脂肪填充】术后3个月的后记',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',usename:'定点双眼皮',satisfaction:4,time:'2018-08-29'},
                    {id: 6, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'【韩国DI整形医院 鼻子修复+脂肪填充】术后3个月的后记',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',usename:'定点双眼皮',satisfaction:4,time:'2018-08-29'},
                    {id: 7, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'【韩国DI整形医院 鼻子修复+脂肪填充】术后3个月的后记',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',usename:'定点双眼皮',satisfaction:4,time:'2018-08-29'},
                    {id: 8, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'【韩国DI整形医院 鼻子修复+脂肪填充】术后3个月的后记',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',usename:'定点双眼皮',satisfaction:4,time:'2018-08-29'},
                    {id: 9, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'【韩国DI整形医院 鼻子修复+脂肪填充】术后3个月的后记',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',usename:'定点双眼皮',satisfaction:4,time:'2018-08-29'},
                ],
                show:false
            }
        }
    }
</script>

<style  lang="less">
    .my-diary{
        background-color: #fff;
        padding: 11px 0 0 0;
        ul{
            margin-bottom: 30px;
        }
        .Content-list{
            height: 192px;
            border-bottom: 1px  solid #e4e4e4;
            padding: 21px 0 21px 0;
            .one-img{
                width: 35%;
                height: 150px;
                float: left;
                img{
                    width: 100%;
                    height:100%;
                    border-radius: 5px;
                }
            }
            .Content-list-img{
                float: left;
                margin-right: 5px;
                width: 150px;
                height: 150px;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                }
                >p{

                    position: absolute;
                    width: 150px;
                    z-index: 1;
                    color: #ffff;
                    text-align: center;
                    height: 22px;
                    line-height: 22px;
                    background-color: rgba(0,0,0,0.4);
                    margin-top: -27px;
                    border-radius: 0 0 5px 5px;
                }
            }
            .Content-list-text{
                width:62%;
                float: left;
                height: 100%;
                margin-left: 15px;
                h1{
                    font-size: 15px;
                    color: #333333;
                    font-weight: normal;
                    padding-bottom: 10px;
                    span{
                        font-size: 12px;
                        float: right;
                        margin-top: -1px;
                    }
                    .ivu-rate-star{
                        margin-right: 0 !important;
                        font-size: 15px;
                    }
                    .ivu-rate{
                        margin-top: -4px;
                    }
                }
                p{
                    font-size: 12px;
                    color: #777777;
                    letter-spacing: 0;
                    text-align: justify;
                    padding-bottom:8px;
                    span{
                        color: #ff5b9a;
                    }
                }
            }
            .Content-list-ues{
                min-height: 30px;
                .Content-list-uesImg{
                    width: 100%;
                    height: 30px;
                    float: left;
                    .icon{
                       font-size: 18px;
                    }
                    p{
                        width: 100%;
                        font-size: 14px;
                        color: #ff5b9a;
                        float: left;
                        line-height: 30px;
                        padding-left: 4px;
                        overflow: hidden;
                        white-space:nowrap;
                        text-overflow:ellipsis;
                    }
                }
                .Content-list-zan{
                    height: 30px;
                    .Content-list-icon{
                        width: 70px;
                        height: 30px;
                        line-height: 30px;
                        float: left;
                        margin-right: 15px;
                        span{
                            padding-left: 8px;
                            color: #999999;
                        }
                    }
                    .icom{
                        margin-top: -4px;
                    }
                    .icon{
                        color: #999999;
                    }
                    .time{
                        float: right;
                        color: #999999;
                    }
                }
            }
        }
    }
    .Content-list:hover{
        border-bottom: 1px  solid #ff82a4;
        background-color: #f8f8f8;
    }
    .Content-list:hover .Content-list-img p{
        background-color: rgba(255,91,154,0.4);
    }
</style>